<template>
    <div class="jingji">
      <corner></corner>
      <home-title :title="jingjiData.title"></home-title>
      <div class="jingji-container" :style="{height: jingjiHeight - 88 - 28 + 'px'}">
        <div class="widget-wrapper">
          <div class="widget-item" v-for="(item,index) of jingjiData.widget" :key="index">
            <widget :item="item"></widget>
          </div>
        </div>
        <div class="chart-pie">
          <div class="chart-pie-item">
            <chart-fengguang :pieValue="jingjiData.pie"></chart-fengguang>
          </div>
        </div>
        <div class="chart-bar">
          <div class="chart-bar-item">
            <chart-bar :chartData="jingjiData.bar1"></chart-bar>
          </div>
        </div>
        <div class="chart-bar">
          <div class="chart-bar-item">
            <chart-bar :chartData="jingjiData.bar2"></chart-bar>
          </div>
        </div>
        <div class="chart-bar">
          <div class="chart-bar-item">
            <chart-bar :chartData="jingjiData.bar3"></chart-bar>
          </div>
        </div>
        <div class="chart-bar">
          <div class="chart-bar-item">
            <chart-bar :chartData="jingjiData.bar4"></chart-bar>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import HomeTitle from './Title'
import Widget from './Widget'
import ChartFengguang from './ChartFengguang'
import ChartBar from './ChartBar'
import Corner from './Corner'
export default {
  name: 'HomeJingji',
  components: {
    HomeTitle,
    Widget,
    ChartFengguang,
    ChartBar,
    Corner
  },
  props: {
    jingjiHeight: Number,
    jingjiData: Object
  }
}
</script>
<style lang="scss">
  .jingji{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 50%;
    height: 100%;
    .jingji-container{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: flex-start;
      flex: 1;
      .widget-wrapper{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 50%;
        height: 50%;
        .widget-item{
          width: 33.33%;
          height: 33.33%;
          padding: 0 5px 10px 5px;
        }
      }
      .chart-pie{
        width: 50%;
        height: 50%;
        .chart-pie-item{
          width: 100%;
          height: 100%;
          padding: 0 5px 10px 5px;
        }
      }
      .chart-bar{
        width: 50%;
        height: 25%;
        .chart-bar-item{
          width: 100%;
          height: 100%;
          padding: 0 5px 10px 5px;
        }
      }
    }
  }
</style>